<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax案例</title>
</head>
<body>
    <input type="button" id="btn" value="点我">
    <p id="p">这是一个段落</p>
</body>
<script>
    document.getElementById("btn").onclick = function () {
        //编写ajax 案例（发送异步请求）
        let xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        } else  {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //当 readyState 状态值发送变化时，会执行 onreadystatechange 事件
        // xmlhttp.onreadystatechange=function()
        // {
        //     console.log(xmlhttp.readyState);
        // }
        //定义请求
        xmlhttp.open("get","testservlet?id=1", true);
        //发送请求
        xmlhttp.send();
        xmlhttp.onreadystatechange=function()  {
            // console.log(xmlhttp.readyState);
            if (xmlhttp.readyState==4 && xmlhttp.status==200)  {
                console.log(xmlhttp.responseText);
                document.getElementById("p").innerText = xmlhttp.responseText;
            }
        }
    }
</script>
</html>